<template>
  <div class="side-menu-container">
    <!-- 加载状态 -->
    <div v-if="loading" class="menu-loading">
      <el-icon class="is-loading"><Loading /></el-icon>
      <span>菜单加载中...</span>
    </div>
    
    <!-- 菜单内容 -->
    <el-menu
      v-else
      :default-active="$route.path"
      router
      background-color="#304156"
      text-color="#bfcbd9"
      active-text-color="#409EFF"
    >
      <template v-for="menu in menuList" :key="menu.id">
        <!-- 有子菜单的情况 -->
        <el-sub-menu v-if="menu.children && menu.children.length > 0" :index="menu.path">
          <template #title>
            <el-icon v-if="menu.icon">
              <component :is="menu.icon" />
            </el-icon>
            <span>{{ menu.name }}</span>
          </template>
          <el-menu-item
            v-for="subMenu in menu.children"
            :key="subMenu.id"
            :index="subMenu.path"
          >
            <el-icon v-if="subMenu.icon">
              <component :is="subMenu.icon" />
            </el-icon>
            <span>{{ subMenu.name }}</span>
          </el-menu-item>
        </el-sub-menu>
        
        <!-- 没有子菜单的情况 -->
        <el-menu-item v-else :index="menu.path">
          <el-icon v-if="menu.icon">
            <component :is="menu.icon" />
          </el-icon>
          <span>{{ menu.name }}</span>
        </el-menu-item>
      </template>
    </el-menu>
    
    <!-- 空状态 -->
    <div v-if="!loading && menuList.length === 0" class="menu-empty">
      <el-icon><Warning /></el-icon>
      <span>暂无菜单数据</span>
    </div>
  </div>
</template>

<script setup>
import { computed, ref, onMounted, watch } from 'vue'
import { useUserStore } from '@/stores/user'

const userStore = useUserStore()
const loading = ref(false)

// 计算属性：获取菜单列表，按sort排序
const menuList = computed(() => {
  const sortMenus = (menus) => {
    return menus
      .sort((a, b) => a.sort - b.sort)
      .map(menu => {
        if (menu.children && menu.children.length > 0) {
          return {
            ...menu,
            children: sortMenus(menu.children)
          }
        }
        return menu
      })
  }
  
  return sortMenus(userStore.menuList || [])
})

// 监听菜单数据变化
watch(() => userStore.menuList, (newMenuList) => {
  if (newMenuList && newMenuList.length > 0) {
    loading.value = false
  }
}, { immediate: true })

// 组件挂载时检查菜单数据
onMounted(async () => {
  if (userStore.menuList.length === 0 && userStore.token) {
    loading.value = true
    try {
      await userStore.getMenuAction()
    } catch (error) {
      console.error('获取菜单数据失败:', error)
    } finally {
      loading.value = false
    }
  }
})
</script>

<style scoped>
.el-menu {
  border-right: none;
}

.el-menu-item, .el-sub-menu__title {
  height: 50px;
  line-height: 50px;
}

.el-menu-item .el-icon, .el-sub-menu__title .el-icon {
  margin-right: 8px;
  width: 16px;
  text-align: center;
}

.menu-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 200px;
  color: #bfcbd9;
  
  .el-icon {
    font-size: 24px;
    margin-bottom: 10px;
  }
  
  span {
    font-size: 14px;
  }
}

.menu-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 200px;
  color: #bfcbd9;
  
  .el-icon {
    font-size: 24px;
  margin-bottom: 10px;
    color: #f56c6c;
  }
  
  span {
    font-size: 14px;
  }
}
</style> 